// pages/tabbar/statistics/index.ts
import * as echarts from "../../../libs/ec-canvas/echarts.min";

function initChart(canvas: any, width: string, height: string, dpr: any) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr,
  });
  canvas.setChart(chart);
  var option = {
    color: ['#5087ec', '#68bbc4'],
    legend: {
      data: ["支出", '收入'],
      show: 'true',
      bottom: '0%'
    },
    tooltip: {
      trigger: "axis",
     
    },
    grid: {
      top: "18",
      left: 0,
      right: 16,
      bottom: "24",
      containLabel: true,
    },
    yAxis: {
      type: "value",
      axisLabel: {
        show: true,
      },
      axisLine: {
        show: false, // 隐藏 x 轴线
      },
      axisTick: {
        show: false, // 隐藏 x 轴刻度
      },
      splitLine: {
        show: true, // 隐藏 x 轴背景的网格线
      },
    },
    xAxis: {
      type: "category",
      axisLine: {
        show: true, // 隐藏 y 轴线
        lineStyle: {
          color: '#999'
        }
      },
      axisTick: {
        show: false, // 隐藏 y 轴刻度
      },
      boundaryGap: false,
      data: ["一", "二", "三", "四", "五", "六", "日"],
    },
    series: [
      {
        name: "支出",
        type: "line",
        symbol: "none",
        smooth: true,
        lineStyle: {
          width: 3,
          color: '#5087ec'
        },
        data: [15, 50, 56.5, 46.5, 22.1, 2.5, 27.7, 55.7, 76.5],
      },
      {
        name: "收入",
        type: "line",
        symbol: "none",
        smooth: true,
        lineStyle: {
          width: 3,
          color: '#68bbc4'
        },
        data: [15, 50, 12.5, 13.5, 14.1, 2.5, 6.7, 2.7, 76.5],
      },
    ],
  };
  chart.setOption(option);
  return chart;
}
Page({
  /**
   * 页面的初始数据
   */
  data: {
    navBarHeight: 0,
    ec: {
      onInit: initChart,
    },

  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    this.setData({ navBarHeight: getApp().globalData.navBarHeight })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() { },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    if (typeof this.getTabBar === "function" && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 3,
      });
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() { },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() { },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() { },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() { },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() { },
});
